import React, { Component } from 'react'
import { Switch, Route, Redirect,withRouter } from 'react-router-dom'
import  Header  from "../ui/Header"
import  Log  from "../ui/Login"
import  Regist  from '../ui/Register'
import { connect } from 'react-redux'
import { loadDataAsync } from '../actionCreater'


@connect(
  (state) =>{
    return{
      list:state.login.list
    }
  },
  (dispatch)=>({
    loadData(){
      dispatch(loadDataAsync())
    }
  })
) 
@withRouter
class Login extends Component {
  constructor(props){
    super(props);
    let url=props.location.pathname.split("/")[2]
    if(url===undefined){
      url="login"
    }
    this.state = {
      type:url
    }
  } 
  // componentDidMount(){
  //   this.props.loadData()
  //  }
  //  componentDidUpdate(){
  //   console.log(this.props.list);
  // }
  handleClick =(index,preIndex)=>{
    return ()=>{
      console.log(index,preIndex);
      if(index !== preIndex){
        this.setState({
          tabIndex:preIndex,
          type:index
        })
        let { history } = this.props
        history.push(`/login/${index}`)
      }
    }
  }
  render() {
    return (
      <div style={{overflowY:"scroll",height:'100%'}}>
      <Header
      tabIndex={this.state.tabIndex}
      type={this.state.type}
      onChageClick={this.handleClick}
      ></Header>
      <Switch>
        <Route path="/login/register" component={Regist}></Route>
        <Route path="/login/login" component={Log}></Route>
        <Redirect from="/login" to={`/login/login`}></Redirect>
      </Switch>
      </div>
    );
  }
}
export default Login